<template>
  <div class="add-container">

    <bread first="商品管理"
           second="商品添加"></bread>

    <el-card>
      <!-- 进度条 -->
      <el-steps :space="200"
                :active="Number(tabsVal)"
                finish-status="success">

        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="已完成"></el-step>
      </el-steps>
      <!-- 进度条 -->
      <!-- 标签页 -->
      ==={{tabsVal}}
      <el-tabs v-model="tabsVal"
               :before-leave="beforeLeave"
               :tab-position="tabPosition">
        <el-tab-pane label="基本信息"
                     name="1">

          <!-- form表单 -->
          <el-form :model="addForm"
                   :rules="rules"
                   ref="ruleForm"
                   class="demo-ruleForm">
            <el-form-item label="商品名称"
                          prop="goods_name">
              <el-input v-model="addForm.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格"
                          prop="goods_price">
              <el-input v-model="addForm.goods_price"></el-input>
            </el-form-item>
            <el-form-item label="商品重量"
                          prop="goods_weight">
              <el-input v-model="addForm.goods_weight"></el-input>
            </el-form-item>
            <el-form-item label="商品数量"
                          prop="goods_number">
              <el-input v-model="addForm.goods_number"></el-input>
            </el-form-item>

            <el-form-item label="商品分类"
                          prop="goods_cat">
              <el-cascader v-model="addForm.goods_cat"
                           :options="options"
                           :props="{ expandTrigger: 'hover',value:'cat_id',label:'cat_name'
                     }"
                           @change="handleChange"></el-cascader>
            </el-form-item>
          </el-form>
          <!-- form表单 -->

        </el-tab-pane>
        <el-tab-pane label="商品参数"
                     name='2'>商品参数
          <div v-for="(item,index) in   manyData"
               :key="index">
            <h3 style="margin:10px  0;">{{item.attr_name}}</h3>
            <el-tag style="margin: 2px;"
                    v-for="(item2,index2) in   item.attr_vals.split(',').filter(item3=>item3!='')"
                    :key="index2">{{item2}}==</el-tag>
          </div>
        </el-tab-pane>
        <el-tab-pane label="商品属性"
                     name='3'>商品属性
          <div v-for="(item,index) in   onlyData"
               :key="index">
            <h3 style="margin:10px  0;">{{item.attr_name}}</h3>
            <el-tag v-for="(item2,index2) in   item.attr_vals.split(',').filter(item3=>item3!='')"
                    :key="index2">{{item2}}==</el-tag>
          </div>
          <el-upload action="https://www.liulongbin.top:8888/api/private/v1/upload"
                     list-type="picture-card"
                     :on-preview="handlePictureCardPreview"
                     :on-remove="handleRemove"
                     :headers="headers">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%"
                 :src="dialogImageUrl"
                 alt="">
          </el-dialog>
        </el-tab-pane>

        <el-tab-pane label="商品内容"
                     name='5'>
          <quillEditor></quillEditor>
          <el-button style="margin-top:10px" type="primary">添加内容</el-button>
        </el-tab-pane>

      </el-tabs>
      
      <!-- 标签页 -->
    </el-card>
     
  </div>
</template>
           
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import { goodsCateApi, paramsApi } from '@/api'
export default {
  name: '',
  components: {
    quillEditor
  },
  created () {
    this.getCates()
  },

  data () {
    return {
      tabPosition: 'left',
      tabsVal: '1',

      //上传的图片
      dialogImageUrl: '',
      dialogVisible: false,


      rules: {
        goods_name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
        goods_price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
        goods_weight: [
          { required: true, message: '请输入商品重量', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
        goods_number: [
          { required: true, message: '请输入商品数量', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
        goods_cat: [
          { required: true, message: '请输入分类id', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
      },


      options: [],
      /* 级联选择器 */

      manyData: [],
      onlyData: [],
      tabsParams: '',

      imageUrl: '',//  图片上传

      //添加商品的表单数据对象
      addForm: {
        goods_name: '',
        goods_price: 0,
        goods_weight: 0,
        goods_number: 0,
        goods_cat: [2843, 2844, 2862],
        //上传图片数组
        pics: [],
        //商品的详情介绍
        goods_introduce: '',
        attrs: []
      },
      //请求头
      headers: {
        Authorization: localStorage.getItem("token")
      }
    }
  },
  methods: {
    /* 获取分类数据列表 */
    async getCates () {
      const res = await goodsCateApi(this.paramsObj)
      console.log(res, 7777);
      this.options = res.data.data
    },
    //上传图片
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleChange (value) {
      // 点击了级联选择器 并选择了 才触发
      // if(this.value.length!==3) {
      //   //  清空value值
      //   this.value=[]
      // } else {
      //   //  表示选择的是第三级  或者：数组的长度=3
      //   this.getManyData()

      // }
    },

    /* tabs切换的钩子函数 */
    beforeLeave (activeName, oldActiveName) {
      console.log(activeName, oldActiveName, 1);
      /* 
      1-获取分类数组
      2-判断数组长度是不是等于3
      3-判断name不是1  ===点击的不是第一个，不是第一个就需要判断数组长度是不是等于3
       */
      if (activeName !== 1) {
        if (this.addForm.goods_cat.length !== 3) {
          this.$message.error('请必须选择分类');
          return false
        }
        //  只要是参数或者是属性就发送请求获取数据
        if (activeName == '2') {
          this.tabsParams = 'many'
          this.getManyData()
        }
        if (activeName == '3') {
          this.tabsParams = 'only'
          this.getManyData()
        }
      }
      return true
    },

    /* 获取动态数据 */
    async getManyData () {
      const res = await paramsApi({ id: this.addForm.goods_cat[this.addForm.goods_cat.length - 1], sel: this.tabsParams })
      console.log(this.tabValue, 2222);
      if (this.tabsParams === 'many') {
        //  是参数
        this.manyData = res.data.data
        console.log(this.manyData, 4444);
      } else {
        //  属性
        this.onlyData = res.data.data

      }
    },

    /* 图片上传 */
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      //console.log(res.data.tmp_path,888877);
      const oicObj = {
        pic: res.data.tmp_path
      }

      this.addForm.pics.push(oicObj)
      console.log(this.addForm, 66677);

    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}
</script>
<style lang='less'  scoped>
.add-container {
  /deep/.el-form-item__label {
    float: none;
  }
  .quill-editor {
    // height: 400px;
    /deep/.ql-container {
      height: 350px;
    }
  }
}
</style>
